<template>
  <div>
     <!-- 表单内容 -->
        <el-form
          label-width="100px"
          :modal="formitem"
          ref="userForm"
       
        >
          <el-form-item label="二级级类名" prop="name">
            <el-input v-model="formitem.name" />
          </el-form-item>
             <el-form-item label="服务费率" prop="serviceRate">
            <el-input v-model="formitem.serviceRate" />
          </el-form-item>
             <el-form-item label="交易费率" prop="tradeRate">
            <el-input v-model="formitem.tradeRate" />
          </el-form-item>
          <el-form-item label="图标">
                <el-upload
             ref="myUpload"
             action=""
             :http-request="Uploe"
             :data="Aliyun"
             :multiple="false"
             :show-file-list="true"
             :file-list="imgsrc"
             :on-remove="handleRemo"
             :limit="1"
            >
             <el-button class="aote" size="small" icon="el-icon-plus" @click="Uploe">上传图片</el-button>
              </el-upload>
          </el-form-item>
        </el-form>
       
          <div style="text-align: right">
            <el-button @click="quxiao">取消</el-button>
            <el-button type="primary" @click="cetirnss">确定</el-button>
          </div>
 
  </div>
</template>

<script>
import {fication,redact} from '@/api/user'
import { client } from '@/components/Hamburger/ossss'
import {ossmessage,ossuploading} from '@/api/oss'
export default {
  props:{
       isEdit: {
      type: Boolean,
      required: true
    },
    childata:{
      type: Object,
      require: true
    },
  },
 data(){
    return{
       images:[],
        imgsrc:[],
          imgs:[],
      Aliyun:{},
         progress: 0, // 进度条
       formitem: {
        parentId:'', 
        name:'',
        iconUrl:'',
        serviceRate:'',
        tradeRate:'',
        id:''
      },
      
    }
 },
 created(){
  this.loadingche()
  this.loachengss()
},
 methods: {
  // 获取阿里云签名
   async loachengss() {

        const { data } = await ossmessage({
        'ossGroup':'CommodityMainImages'
      })
   this.Aliyun = data
  //  console.log(this.Aliyun);


    },

    loadingche(){
        this.formitem.parentId = this.childata.id
        if(this.isEdit == true){
          this.formitem = this.childata;
            this.imgs = JSON.parse(this.formitem.iconUrl)
        // console.log('l112',this.imgs);
      for(let i = 0; i < this.imgs.length; i++){
           this.imgsrc.push({
           'url': this.imgs[i].url,
           'name':this.imgs[i].name
         })
         }
        }
         
    },

       quxiao(){
        this.$emit('close')
      },
     async cetirnss(){
        if(this.isEdit == false){
           this.formitem.iconUrl = JSON.stringify(this.imgsrc)
           const res = await fication(this.formitem)
           this.$message.success(res.msg)
        } else if(this.isEdit == true){
           this.formitem.id = this.childata.id
           this.formitem.iconUrl = JSON.stringify(this.imgsrc)
            const res = await redact(this.formitem)
            this.$message.success(res.msg)
        }
     this.$emit('close')
      },


       // 上传图片检测报告
    Uploe(file){
      console.log(file);
       const that = this
     
  //  上传文件配置
   async function multipartUpload() {
     const listdata = await ossuploading({
      'fileName':'.jpg','ossGroup':'CommodityMainImages'
    })
     let fileName = listdata.data.path
    //  console.log('741',fileName);
    //  console.log('999',file);
    client(that.Aliyun).put(fileName, file.file,
     {
      progress: function(p) { // 获取进度条的值
      //  console.log('777',p)
       that.progress = p * 100
      }
     }).then(
     result => {
      // 下面是如果对返回结果再进行处理，根据项目需要
      // console.log(result)
      // that.imgUrl = 'http://' + result.bucket + '.' + that.Aliyun.endpoint + '/' + result.name
      that.images.push(result.url)
      
      that.imgsrc.push({
       name: file.file.name,
       url: result.url
      })
      
     })
   }
   multipartUpload()
    },
   // 删除图片
  handleRemo(){
 for (var i in this.imgsrc) {
      this.imgsrc.splice(i, 1)

   }
  },
 }
}
</script>

<style scoped>
.aote{
  border: 1px solid #ff7144;
  color: #ff7144;
}
</style>